<template>
  <div style="text-align: right">
    <el-button icon="el-icon-refresh" @click="refresh()"></el-button>
    <el-button-group v-model="colSelected">
      <el-popover
        placement="bottom-end"
        width="150"
        trigger="hover"
        @show="showPopover"
      >
        <template #reference>
          <el-button icon="el-icon-expand"></el-button>
        </template>
        <div class="checkboxCss">
          <!-- 有个单选框问题没解决：无法获取show状态，先写死 -->
          <el-checkbox
            :checked="true"
            v-for="(item, index) in colOptions"
            :label="item"
            :key="item"
            @change="changeColumn($event, index)"
          />
        </div>
      </el-popover>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: "Button",
  data() {
    return {
      showSearchWrap: true, // 存放父组件传值--showTop
      colOptions: [],
      colSelected: [],
      columnChage: false,
    };
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    // 刷新页面
    refresh() {
      window.location.reload();
    },
    // 列的显示隐藏
    showPopover() {
      if (!this.columnChage) {
        console.log(this);
        console.log(this.columns);
        this.columns.map((item) => {
          this.colOptions.push(item.name);
        });
        this.colSelected = this.columns.map((item) => {
          if (item.show) {
            return item.name;
          }
        });
        this.columnChage = true;
      }
    },
    // 选择列
    changeColumn(show, index) {
      let columns = this.columns;
      columns.map((item, i) => {
        if (index === i) {
          item.show = show;
        }
      });
    },
  },
};
</script>

<style>
.checkboxCss {
  display: flex;
  flex-direction: column;
}
</style>
